<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../js/vue.js"></script>
</head>
<!-- 
    Vue中使用组件的三大步骤：
        一、定义组件（创建组件）
        二、注册组件
        三、使用组件（写组件标签）

        一、如何定义一个组件？
            使用Vue.extend(option)创建，其中option和new Vue(option)时传入的几乎一样，
            区别如下：
                1.不写el    -- 最终的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
                2.data使用函数式    ——避免组件复用时，数据存在引用关系
            备注：使用template可以配置组件结构

        二、如何注册组件？
            1.局部注册：new Vue时传入components选项
            2.全局注册：Vue.component("组件名",组件)

        三、编写组件标签：
            <school></school>

 -->

<body>

    <div id="root">
        <school></school> <!-- 三、编写组件标签 -->
        <student></student> <!-- 三、编写组件标签 -->
        <br>
        <hello></hello>
        <br>
    </div>
    <div id="root2">
        <hello></hello>
    </div>

    <script>
        Vue.config.productionTip = false;

        // 一、创建school组件
        const school = Vue.extend({
            data() {
                return {
                    schoolName: "尚硅谷",
                    address: "北京昌平"
                }
            },
            template: `
        <div>
        <h2>学校名称:{{schoolName}}</h2>
        <h2>学校地址:{{address}}</h2>
    </div>
    `
        });
        // 一、创建student组件
        const student = Vue.extend({

            data() {
                return {
                    studentName: "张三",
                    age: 18
                }
            },
            template: `
        <div>
        <h2>学生姓名:{{studentName}}</h2>
        <h2>学生年龄:{{age}}</h2>
    </div>
    `
        });
        // 一、创建hello组件
        const hello = Vue.extend({
            data() {
                return {
                    name: "李四"
                }
            },
            template: `
                <div>
                    <h1>你好啊,{{name}}</h1>    
                </div>
                `
        });


        //二、注册全局组件
        Vue.component("hello", hello);

        new Vue({
            el: "#root",
            // 二、注册组件
            components: {
                school: school,
                student: student
            }
        });
        new Vue({
            el: "#root2"
        })

    </script>
</body>

</html>